import Api from '@/services/ant-design-pro/index';
import { Image, message } from 'antd';
import dayjs from 'dayjs';
import { TCommentItem } from '../Comment';
import style from '../index.less';
import MyComment from './MyComment';
interface IProps {
  avatar: string;
  id: string | number;
  articleID: number;
  item: TCommentItem;
  ifChild: boolean; // 回复的子评论
  type?: 'comment' | 'reply';
  author?: string;
  commentID?: string;
  getComment: () => void;
  onReply: (item: TCommentItem) => void;
}

const OtherComponent: React.FC<IProps> = ({
  avatar,
  id,
  getComment,
  articleID,
  item,
  onReply,
  ifChild,
}) => {
  const onSupport = (item, type) => {
    Api.Exercise03.onSupport({
      commentID: item.commentID,
      pCommentID: item?.pCommentID ?? undefined,
      type,
    }).then((res) => {
      if (res.status === 200) {
        message.success('操作成功');
        getComment();
      }
    });
  };
  return (
    <div className={`${style.item}  ${ifChild ? '' : style.border}}`} key={item.commentID}>
      <Image className={style.avatar} preview={false} src={item.avatar}></Image>
      <div className={style.commentBox}>
        <div className={style.name}>{item.name}</div>
        <div className={style.comment}>{item.comment}</div>
        <div className={style.timeAndStar}>
          <span>{dayjs(item.created).format('YYYY-MM-DD')}</span>
          <span onClick={() => onSupport(item, 1)}>赞:{item.upStar}</span>
          <span onClick={() => onSupport(item, 0)}>踩:{item.downStar}</span>
          <span onClick={() => onReply(item)}>回复</span>
        </div>
        {item.reply && (
          <MyComment
            avatar={avatar}
            id={id}
            articleID={articleID}
            getComment={getComment}
            type="reply"
            author={item.name}
            commentID={item.commentID}
          ></MyComment>
        )}
        {item.children?.length > 0 &&
          item.children.map((child) => (
            <OtherComponent
              id={id}
              articleID={articleID}
              item={child}
              onReply={onReply}
              avatar={avatar}
              key={child.commentID}
              getComment={getComment}
              ifChild={true}
            ></OtherComponent>
          ))}
      </div>
    </div>
  );
};

export default OtherComponent;
